<template>
	<div id="a">
		<el-dialog
			title="分配权限"
			:visible.sync="allotDialog"
			:before-close="dialogVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<div class="down-tree">
				<el-tree
					ref="tree"
					height="200"
					:data="allotPermission"
					show-checkbox
					default-expand-all
					node-key="id"
					highlight-current
					:props="defaultProps"
					:default-checked-keys="allotChecked"
				>
				</el-tree>
			</div>
			<el-button type="primary" @click="confirmDialog">确 定</el-button>
			<el-button @click="dialogVisible">取 消</el-button>
		</el-dialog>
	</div>
</template>

<script>
import { assignPermissions } from '@/http/api.js'
import { saveTCustomerFormAppmenu } from '@/http/appMenu'
export default {
	name: 'AddDialog',
	props: {
		allotDialog: {
			type: Boolean,
			default: false,
		},
		allotPermission: {
			type: Array,
			default: () => {
				return []
			},
		},
		allotRow: {
			type: Object,
			default: () => {
				return {}
			},
		},
		allotChecked: {
			type: Array,
			default: () => {
				return []
			},
		},
	},
	data() {
		return {
			menuTableData: this.allotPermission,
			defaultProps: {
				children: 'children',
				label: 'menuName',
			},
			allotRowId: this.allotRow.id,
			allotCheckedKeys: [],
		}
	},
	mounted() {
		// this.disabledAllot()
	},
	created() {},
	methods: {
		// 点击确认请求接口
		confirmDialog() {
			if (this.allotRow.type == '1') {
				this.saveAppMenuForm()
			} else {
				this.saveMenuDictForm()
			}
		},
		saveAppMenuForm() {
			let param = {
				menuId: this.add(),
				customerId: this.allotRow.id,
			}
			saveTCustomerFormAppmenu(param).then(({ data }) => {
				if (data.head.code == 200) {
					this.$message({
						message: '保存成功',
						type: 'success',
					})
					this.$emit('handerConfirm', false)
					this.$refs.tree.setCheckedKeys([])
				}
			})
		},
		saveMenuDictForm() {
			let allotID = {
				id: this.add(),
				menuAssemblyHref: this.allotRow.id,
			}
			console.log(allotID)
			assignPermissions(allotID).then(({ data }) => {
				if (data.head.code == 200) {
					this.$message({
						message: '保存成功',
						type: 'success',
					})
					this.$emit('handerConfirm', false)
					this.$refs.tree.setCheckedKeys([])
				} else {
					this.$message.error('保存失败')
					this.$emit('handerConfirm', true)
				}
			})
		},
		add() {
			let checkID = this.$refs.tree.getCheckedKeys(true)
			console.log(checkID)
			return checkID.length > 0 ? checkID.join(',') : null
		},
		dialogVisible() {
			this.$refs.tree.setCheckedKeys([])
			this.$emit('handerConfirm', false)
		},
	},
}
</script>

<style scoped>
.down-tree {
	height: 500px;
	display: block;
	overflow-y: scroll;
}
::-webkit-scrollbar-track-piece {
	background-color: #fff;
	-webkit-border-radius: 0;
	border-radius: 0;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	height: 50px;
	background-color: #b8b8b8;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	outline: 2px solid #fff;
	outline-offset: -2px;
	border: 2px solid #fff;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
::-webkit-scrollbar-thumb:hover {
	height: 50px;
	background-color: #878987;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
</style>
